<template>
	<view class="container">
		<!-- 头部导航栏 -->
		<view class="header">
		</view>
		
		<!-- 标签页导航 -->
		<view class="tab-bar">
			<view 
				class="tab-item" 
				:class="{ active: activeTab === 'pending' }" 
				@click="switchTab('pending')"
			>
				<text class="tab-text">待使用</text>
				<view class="tab-underline" v-if="activeTab === 'pending'"></view>
			</view>
			<view 
				class="tab-item" 
				:class="{ active: activeTab === 'used' }" 
				@click="switchTab('used')"
			>
				<text class="tab-text">已使用</text>
				<view class="tab-underline" v-if="activeTab === 'used'"></view>
			</view>
			<view 
				class="tab-item" 
				:class="{ active: activeTab === 'expired' }" 
				@click="switchTab('expired')"
			>
				<text class="tab-text">已过期</text>
				<view class="tab-underline" v-if="activeTab === 'expired'"></view>
			</view>
		</view>
		
		<!-- 主内容区域 -->
		<view class="main-content">
			<!-- 待使用优惠券 -->
			<view class="coupon-list" v-if="activeTab === 'pending'">
				<view class="coupon-card pending" v-for="(coupon, index) in pendingCoupons" :key="index" @click="useCoupon(coupon)">
					<view class="coupon-top">
						<view class="coupon-info-left">
							<text class="usage-limit">{{ coupon.limit }}</text>
							<text class="usage-condition">{{ coupon.condition }}</text>
						</view>
						<view class="coupon-amount">
							<text class="discount-symbol">¥</text>
							<text class="discount-amount">{{ coupon.amount }}</text>
						</view>
					</view>
					<view class="coupon-divider"></view>
					<view class="coupon-bottom">
						<text class="validity-period">有效期至: {{ coupon.validity }}</text>
						<text class="action-text">去使用 ></text>
					</view>
				</view>
			</view>
			
			<!-- 已使用优惠券 -->
			<view class="coupon-list" v-if="activeTab === 'used'">
				<view class="coupon-card used" v-for="(coupon, index) in usedCoupons" :key="index">
					<view class="coupon-top">
						<view class="coupon-info-left">
							<text class="usage-limit">{{ coupon.limit }}</text>
							<text class="usage-condition">{{ coupon.condition }}</text>
						</view>
						<view class="coupon-amount">
							<text class="discount-symbol">¥</text>
							<text class="discount-amount">{{ coupon.amount }}</text>
						</view>
					</view>
					<view class="coupon-divider"></view>
					<view class="coupon-bottom">
						<text class="validity-period">有效期至: {{ coupon.validity }}</text>
						<text class="action-text">已使用 ></text>
					</view>
				</view>
			</view>
			
			<!-- 已过期优惠券 -->
			<view class="coupon-list" v-if="activeTab === 'expired'">
				<view class="coupon-card expired" v-for="(coupon, index) in expiredCoupons" :key="index">
					<view class="coupon-top">
						<view class="coupon-info-left">
							<text class="usage-limit">{{ coupon.limit }}</text>
							<text class="usage-condition">{{ coupon.condition }}</text>
						</view>
						<view class="coupon-amount">
							<text class="discount-symbol">¥</text>
							<text class="discount-amount">{{ coupon.amount }}</text>
						</view>
					</view>
					<view class="coupon-divider"></view>
					<view class="coupon-bottom">
						<text class="validity-period">有效期至: {{ coupon.validity }}</text>
						<text class="action-text">已过期 ></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 'pending',
				pendingCoupons: [
					{
						amount: 20,
						limit: '仅限于XX加油站使用',
						condition: '满200元可用',
						validity: '2020.04.11—2023.05.11'
					},
					{
						amount: 20,
						limit: '仅限于XX加油站使用',
						condition: '满200元可用',
						validity: '2020.04.11—2023.05.11'
					},
					{
						amount: 20,
						limit: '仅限于XX加油站使用',
						condition: '满200元可用',
						validity: '2020.04.11—2023.05.11'
					}
				],
				usedCoupons: [
					{
						amount: 20,
						limit: '仅限于XX加油站使用',
						condition: '满200元可用',
						validity: '2020.04.11—2023.05.11'
					},
					{
						amount: 20,
						limit: '仅限于XX加油站使用',
						condition: '满200元可用',
						validity: '2020.04.11—2023.05.11'
					},
					{
						amount: 20,
						limit: '仅限于XX加油站使用',
						condition: '满200元可用',
						validity: '2020.04.11—2023.05.11'
					}
				],
				expiredCoupons: [
					{
						amount: 20,
						limit: '仅限于XX加油站使用',
						condition: '满200元可用',
						validity: '2020.04.11—2023.05.11'
					},
					{
						amount: 20,
						limit: '仅限于XX加油站使用',
						condition: '满200元可用',
						validity: '2020.04.11—2023.05.11'
					},
					{
						amount: 20,
						limit: '仅限于XX加油站使用',
						condition: '满200元可用',
						validity: '2020.04.11—2023.05.11'
					}
				]
			}
		},
		methods: {
			switchTab(tab) {
				this.activeTab = tab;
			},
			useCoupon(coupon) {
				uni.showModal({
					title: '使用优惠券',
					content: `确定要使用这张${coupon.amount}元优惠券吗？`,
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: '使用成功',
								icon: 'success'
							});
						}
					}
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #f8f9fa;
		display: flex;
		flex-direction: column;
	}
	
	/* 头部样式 */
	.header {
		height: 0;
		background-color: #1976d2;
		position: relative;
		z-index: 100;
	}
	
	/* 标签页样式 */
	.tab-bar {
		height: 88rpx;
		background-color: #3183FB;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 32rpx;
	}
	
	.tab-item {
		flex: 1;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	
	.tab-text {
		color: white;
		font-size: 28rpx;
		font-weight: 500;
	}
	
	.tab-item.active .tab-text {
		font-weight: 600;
	}
	
	.tab-underline {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 4rpx;
		background-color: white;
		border-radius: 2rpx;
	}
	
	/* 主内容区域 */
	.main-content {
		flex: 1;
		padding: 40rpx 32rpx;
		background-color: #fafafa;
	}
	
	/* 优惠券列表 */
	.coupon-list {
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	
	/* 优惠券卡片 */
	.coupon-card {
		background: linear-gradient(135deg, #ff6b35, #ff8c42);
		border-radius: 24rpx;
		padding: 0;
		display: flex;
		flex-direction: column;
		position: relative;
		box-shadow: 0 12rpx 32rpx rgba(255, 107, 53, 0.35);
		overflow: visible;
		height: 220rpx;
		margin-bottom: 32rpx;
		transition: all 0.3s ease;
	}
	
	.coupon-card.used {
		opacity: 0.7;
		background: linear-gradient(135deg, #ff6b35, #ff8c42);
	}
	
	.coupon-card.expired {
		opacity: 0.9;
		background: linear-gradient(135deg, #d0d0d0, #e0e0e0);
	}
	
	/* 优惠券撕口效果 - 小白圈 */
	.coupon-card::before {
		content: '';
		position: absolute;
		left: -12rpx;
		top: 55%;
		transform: translateY(-50%);
		width: 36rpx;
		height: 36rpx;
		background-color: #f5f5f5;
		border-radius: 50%;
		z-index: 10;
	}
	
	.coupon-card::after {
		content: '';
		position: absolute;
		right: -12rpx;
		top: 55%;
		transform: translateY(-50%);
		width: 36rpx;
		height: 36rpx;
		background-color: #f5f5f5;
		border-radius: 50%;
		z-index: 10;
	}
	
	/* 优惠券顶部区域 */
	.coupon-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 36rpx 48rpx 0 48rpx;
		height: 45%;
		box-sizing: border-box;
	}
	
	.coupon-info-left {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
		flex: 1;
	}
	
	.coupon-amount {
		display: flex;
		align-items: baseline;
		margin-left: 24rpx;
	}
	
	.discount-symbol {
		color: white;
		font-size: 42rpx;
		font-weight: bold;
		margin-right: 6rpx;
		vertical-align: top;
	}
	
	.discount-amount {
		color: white;
		font-size: 84rpx;
		font-weight: bold;
		line-height: 1;
	}
	
	/* 优惠券分隔线 - 简洁虚线 */
	.coupon-divider {
		position: absolute;
		width: 100%;
		height: 2rpx;
		top: 55%;
		left: 0;
		transform: translateY(-50%);
		overflow: visible;
		z-index: 5;
	}
	
	.coupon-divider::before {
		content: '';
		position: absolute;
		top: 0;
		left: 18rpx;
		right: 18rpx;
		height: 2rpx;
		background: repeating-linear-gradient(
			to right,
			rgba(255, 255, 255, 0.8) 0rpx,
			rgba(255, 255, 255, 0.8) 4rpx,
			transparent 4rpx,
			transparent 8rpx
		);
	}
	
	/* 优惠券底部区域 */
	.coupon-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 48rpx 36rpx 48rpx;
		height: 55%;
		box-sizing: border-box;
	}
	
	.usage-limit {
		font-size: 26rpx;
		color: white;
		line-height: 1.4;
		opacity: 0.9;
		font-weight: 500;
	}
	
	.usage-condition {
		font-size: 32rpx;
		color: white;
		font-weight: 700;
		line-height: 1.4;
		margin-top: 4rpx;
	}
	
	.validity-period {
		font-size: 26rpx;
		color: white;
		line-height: 1.4;
		opacity: 0.9;
		font-weight: 500;
	}
	
	.action-text {
		font-size: 28rpx;
		font-weight: 600;
		color: white;
		white-space: nowrap;
		background-color: transparent;
	}
	
	.coupon-card.pending .action-text {
		color: white;
		background-color: transparent;
	}
	
	.coupon-card.used .action-text {
		color: white;
		opacity: 0.7;
	}
	
	.coupon-card.expired .action-text {
		color: #666666;
		opacity: 0.8;
	}
	
	/* 已使用优惠券特殊样式 */
	.coupon-card.used .discount-symbol,
	.coupon-card.used .discount-amount,
	.coupon-card.used .usage-limit,
	.coupon-card.used .usage-condition,
	.coupon-card.used .validity-period {
		color: white;
		opacity: 0.7;
	}
	
	/* 已过期优惠券特殊样式 */
	.coupon-card.expired .discount-symbol,
	.coupon-card.expired .discount-amount,
	.coupon-card.expired .usage-limit,
	.coupon-card.expired .usage-condition,
	.coupon-card.expired .validity-period {
		color: #666666;
		opacity: 0.8;
	}
	
	/* 已过期优惠券中间划线效果 */
	.coupon-card.expired .coupon-divider::before {
		background: repeating-linear-gradient(
			to right,
			rgba(102, 102, 102, 0.6) 0rpx,
			rgba(102, 102, 102, 0.6) 4rpx,
			transparent 4rpx,
			transparent 8rpx
		);
	}
	
	/* 点击效果 */
	.coupon-card.pending:active {
		transform: scale(0.98);
		box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.5);
	}
	
	.coupon-card.pending:hover {
		transform: translateY(-2rpx);
		box-shadow: 0 16rpx 40rpx rgba(255, 107, 53, 0.4);
	}
</style>
